<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>@yield('title') - 后台管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="_token" content="{{ csrf_token() }}"/>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/static/libs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="/static/css/common.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/webstyle.css">

    <link rel="stylesheet" href="/static/css/backend/base.css">
    <!-- jQuery 2.2.0 -->
    <script src="/static/libs/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="/static/js/general.js"></script>
    <script src="/static/libs/vue.min.js"></script>
    <script src="/static/libs/vue-resource.js"></script>
    <link href="/static/libs/element-ui/2.15.7/index.css" rel="stylesheet">
    <script src="/static/libs/element-ui/2.15.7/index.js"></script>
</head>

<body>
<div class="login-container">
    <div class="login-container-con" id="app">
        <div class="head">
            <el-col
                    :xs="8"
                    :sm="8"
                    :md="4"
                    :lg="1"
                    style="width:36px;height:36px;overflow:hidden;margin-right:10px;"
            >
                <img :src="site.site_logo" alt="" style="width:100%" />
            </el-col>
            <el-col :span="15">
                <div
                        style="color:#666;font-size:24px;font-weight:900;line-height:36px;"
                >
                    [[ site.name ]]
                </div>
            </el-col>
        </div>
        <el-row class="content_info">
            <el-col :span="15">
                <div class="login_img">
                    <img :src="site.advertisement" alt="" />
                </div>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="8" class="login_input">
                <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="rules"
                        class="login-form"
                        label-position="left"
                >
                    <div class="title-container">
                        <h3 class="title">
                            内容管理系统
                        </h3>
                    </div>

                    <el-form-item prop="username">
                        <i
                                class="el-icon-user"
                                style="font-size:20px;"
                        ></i>
                        <el-input
                                v-model="loginForm.username"
                                placeholder="请输入用户名"
                                name="name"
                                type="text"
                                auto-complete="on"
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <i class="el-icon-lock" style="font-size:20px;"></i>
                        <el-input
                                v-model="loginForm.password"
                                :type="passwordType"
                                placeholder="请输入密码"
                                name="password"
                                auto-complete="on"
                                @keyup.enter.native="handleLogin"
                        ></el-input>
                        <span class="show-pwd" @click="showPwd">
                            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                        </span>
                    </el-form-item>

                    <el-form-item prop="captcha">
                        <i
                                class="el-icon-mobile-phone"
                                style="font-size:20px;"
                        ></i>
                        <el-input
                                v-model="loginForm.captcha"
                                placeholder="请输入图形验证码"
                                name="name"
                                type="text"
                                auto-complete="on"
                                style="width:calc(100% - 180px)"
                        ></el-input>
                        <img @click="freshCode" :src="captcha.img" title="点击刷新验证码" style="cursor:pointer"/>
                    </el-form-item>
                    <el-button
                            :loading="loading"
                            type="primary"
                            style="width:100%;margin:30px 0;padding:12px 20px;font-size:18px"
                            @click.native.prevent="handleLogin"
                    >
                        登录
                    </el-button>
                    <div style="position:relative"></div>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-top:40px;">
            <el-col align="center" style="color:#999;padding:30px 0">
                <p v-html="site.information"></p>
            </el-col>
        </el-row>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        name: 'login',
        data() {
            var validateMobile = (rule, value, callback) => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error("手机号格式不正确"));
                } else {
                    callback();
                }
            };
            return {
                login_info: {},
                site: {},
                // is_tips: false,
                loginForm: {
                    username: "",
                    password: "",
                    mobile:'',
                },
                passwordType: "password",
                // 图形验证码
                captcha: {
                    img:''
                },
                captcha_text: "获取验证码",
                isDisabled: 1,
                t: 60,

                loading: false,
                showDialog: false,
                redirect: undefined,

                rules: {
                    username: [{ required: true, trigger: "blur", message: "请输入账号" }],
                    password: [{ required: true, trigger: "blur", message: "请输入密码" }],

                    mobile: [
                        {
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur"
                        },
                        {
                            validator: validateMobile,
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        created() {
            this.getLoginSite();
        },
        mounted() {
        },
        methods: {
            getLoginSite() {
                this.$http.post('/admin/login/getInfo', {})
                    .then(response => {
                        if (response.data.result) {
                            this.site = response.data.data;
                            //this.fun.setIcon(this.site.title_icon);
                            console.log('this.site.captcha',this.site.captcha)
                            this.captcha = this.site.captcha;
                            this.fun.setTitle(this.site.name+"-登录");
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            getIndex() {
                try {
                    this.$http.post('/admin/login/login', {
                            username: this.loginForm.username,
                            password: this.loginForm.password,
                            captcha: this.loginForm.captcha,
                            mobile: this.loginForm.mobile,
                            code: this.loginForm.code,
                            remember:0,
                        })
                        .then(response => {
                            if (response.data.result) {
                                this.loading = false;
                                if (response.data &&
                                    response.data.status === -5
                                ) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                    return;
                                }
                                window.location.href = `{!! absolute_admin_url('common.index.dashboard') !!}`;
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                });
                                if(this.captcha.status == true) {
                                    this.freshCode();
                                }
                                this.loading = false;
                            }
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } catch (error) {
                    console.log(error);
                    this.$message.error('密码输入错误');
                    this.loading = false;
                }
            },
            showPwd() {
                if (this.passwordType === "password") {
                    this.passwordType = "";
                } else {
                    this.passwordType = "password";
                }
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.getIndex();
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            //刷新图形验证码
            freshCode() {
                this.$http.post('/admin/login/refreshCaptcha', {})
                    .then(response => {
                        if (response.data.result) {
                            this.captcha.img = response.data.data;
                            console.log('captcha.img',this.captcha.img)
                        } else {
                            this.loading = false;
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
        },
    })
</script>
<style>
    @supports (-webkit-mask: none) and (not (cater-color: #fff)) {
        .login-container .el-input input {
            color: #fff;
        }
        .login-container .el-input input::first-line {
            color: #333;
        }
    }

    /* reset element-ui css */
    .login-container .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
    }

    .login-container .el-input input {
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 12px 5px 12px 15px;
        color: #333;
        height: 47px;
        background-color: #fff;
        caret-color: #666;
    }

    .login-container .el-input input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: #333 !important;
    }

    .login-container .el-form-item {
        border-bottom: 1px solid #f5f5f5;
        background: #fff;
        color: #333;
    }
    .login-container {
        min-height: 100%;
        width: 100%;
        background-color: #fff;
    }

    .login-container .forget {
        font-size: 14px;
        color: #409eff;
        cursor: pointer;
        position: absolute;
        right: 2rem;
    }

    .login-container .head {
        display: flex;
        margin-top: 60px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .login-container .content_info {
        margin-top: 40px;
        display: flex;
        align-items: center;
    }

    .login-container .content_info .login_img {
        padding: 0;
        overflow: hidden;
    }

    .login-container .content_info .login_img img {
        width: 100%;
        height: 365px;
    }

    .login-container .content_info .login_input {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
        background: #fff;
    }

    .login-container .content_info .login_input input:focus {
        color: #333;
    }

    .login-container .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 30px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .login-container .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
    }

    .login-container .tips span:first-of-type {
        margin-right: 16px;
    }

    .login-container .svg-container {
        padding: 6px 5px 6px 15px;
        color: #889aa4;
        vertical-align: middle;
        width: 35px;
        display: inline-block;
    }

    .login-container .title-container {
        position: relative;
    }

    .login-container .title-container .title {
        font-size: 26px;
        color: #333;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: bold;
    }

    .login-container .title-container .set-language {
        color: #fff;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0;
        cursor: pointer;
    }

    .login-container .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: #889aa4;
        cursor: pointer;
        user-select: none;
    }

    .login-container .thirdparty-button {
        position: absolute;
        right: 0;
        bottom: 6px;
    }

    .login-container-con {
        width: 1200px;
        margin: 0 auto;
    }

    @media screen and (max-width: 1200px) {
        .login-container-con {
            width: 1000px;
            margin: 0 auto;
        }
    }
</style>
</body>
</html>
